<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}img/icons/icon-48x48.png"/>

    <title>新闻编辑</title>

    <link href="${pageContext.request.contextPath}/css/app.css" rel="stylesheet">
    <script  src="../../../js/w.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
</head>

<body>
<div class="wrapper">
    <%@include file="../icn/sidebar.jsp" %>
    <div class="main">
        <%@include file="../icn/head.jsp" %>

        <div class="card-body">
<%--            <form action="${pageContext.request.contextPath}/system/news/newsEdit/${news.id}" method="post">--%>
                <div class="form-group row">
                    <label class="col-form-label col-sm-2 text-sm-right">标题</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" placeholder="标题" value="${news.title}" name="title" id="title">
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label col-sm-2 text-sm-right">作者</label>
                    <div class="col-sm-8">


                            <input type="text" class="form-control" placeholder="作者" value="${news.userInfo.name}"
                                   name="name" disabled>

                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-2"></div>
                    <div id="div1">
                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器 </p>
                    </div>
<%--                    <label class="col-form-label col-sm-2 text-sm-right">内容</label>--%>
<%--                    <div style="width: 54%;border-radius: 5px;margin-left: 1%">--%>
<%--                        <script id="container" name="newsDetail.content" type="text/plain">--%>
<%--                            ${news.newsDetail.content}--%>
<%--                        </script>--%>
<%--                    </div>--%>
                </div>
                <div class="form-group row">
                    <div style="margin-left: 48%">
                        <button type="submit" class="btn btn-primary" onclick="save()">保存</button>
                        <button type="submit" class="btn btn-primary" onclick="history.back(-1)">取消</button>
                    </div>
                </div>

        </div>
    </div>


</div>
<script>
    function save() {

        console.log(111);
        var title =$('#title').val();
        <%--var id =${news.id!=null?news.id:""};--%>
        <%--var newsDetailId=${news.newsDetailId!=null?news.newsDetailId:""};--%>
        var content =editor.txt.html()

        console.log(${news.id})
        console.log(editor.txt.html());

        $.ajax({
            type : 'post',
            url : "${pageContext.request.contextPath}/system/news/newsEdit",
            data : {
                "id":${news.id!=null?news.id:-1},
                "content":content,
                "newsDetailId":${news.newsDetailId!=null?news.newsDetailId:-1},
                "title":title
            },
            success : function(result) {
                alert(result.msg)
                if (result.code == 0) {

                    location.href="/system/news/newsList"


                }



            }
        });
    }
</script>


<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">


    const E = window.wangEditor
    const editor = new E('#div1')
    // 或者 const editor = new E( document.getElementById('div1') )
    editor.config.uploadImgServer = '/user/uploadNewsImg'
    editor.config.uploadFileName = 'file'
    editor.create()



    editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
            // console.log(xhr)
            //
            // // 可阻止图片上传
            // return {
            //     prevent: true,
            //     msg: '需要提示给用户的错误信息'
            // }
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
            console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn, result) {
            // result 即服务端返回的接口
            console.log('customInsert', result)

            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.data.url)
        }
    }

</script>

<script>
    console.log(123);
    <%--console.log('${news.newsDetail.content}')--%>
    editor.txt.html(`${news.newsDetail.content}`)
</script>


<script src="${pageContext.request.contextPath}/js/app.js"></script>
</body>

</html>